<template>
    <div class="flex justify-center items-center min-h-screen bg-gray-100">
        <el-form ref="ruleFormRef" class="bg-white p-8 rounded shadow-md w-full max-w-md" :model="ruleForm"
            :rules="rules" label-width="120px">
            <el-form-item label="设备名称" prop="itemName">
                <el-select v-model="ruleForm.itemName" placeholder="请选择设备名称">
                    <el-option v-for="item in getshebeilist" :key="item.id" :label="item.equipment_Name"
                        :value="item.equipment_Name" />
                </el-select>
            </el-form-item>
            <el-form-item label="清洗原因" prop="itemCause">
                <el-input v-model="ruleForm.itemCause" type="textarea" placeholder="请输入清洗原因" />
            </el-form-item>
                <el-form-item label="时间:单位/小时" prop="planTime" >
                    <span><el-input v-model="ruleForm.planTime" /></span>
                </el-form-item>
            <el-form-item label="清洗人员" prop="cleaningStaff">
                <el-select v-model="ruleForm.cleaningStaff" placeholder="请选择清洗人员">
                    <el-option v-for="item in getuserlist" :key="item.userId" :label="item.userNickName"
                        :value="item.userName" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入备注信息" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    添加
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { read, write } from "@/axios/axiosHelper"
import { ElMessage } from 'element-plus'

interface RuleForm {
    itemName: string
    itemCause: string
    planTime: string | null
    cleaningStaff: string
    remark: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    itemName: '',
    itemCause: '',
    planTime: null,
    cleaningStaff: '',
    remark: ''
})

const rules = reactive<FormRules<RuleForm>>({
    itemName: [
        { required: true, message: '请输入设备名称', trigger: 'blur' },
        { min: 3, max: 5, message: '长度应在3到5之间', trigger: 'blur' }
    ],
    itemCause: [
        { required: true, message: '请输入清洗原因', trigger: 'change' }
    ],
    planTime: [
        { required: true, message: '请选择计划日期', trigger: 'change' }
    ],
    cleaningStaff: [
        { required: true, message: '请选择清洗人员', trigger: 'change' }
    ],
    remark: [
        { required: true, message: '请输入备注信息', trigger: 'change' }
    ]
})

onMounted(() => {
    getshebei();
    getuser();
})

const getuserlist = ref([{
    userId: 0,
    userName: "",
    password: "",
    userNickName: ""
}])
const getuser = () => {
    axios.get('http://10.223.8.6:8000/read/api/User/GetUse').then((response) => {
        getuserlist.value = response.data.data
    })
}

const getshebeilist = ref([{
    id: 0,
    equipment_Name: "",
    model: "",
    manufacturer: "",
    purchase_Date: "",
    status: ""
}])
const getshebei = () => {
    axios.get('http://8.154.44.176:8000/p-read/api/Equipment/GetEquipment').then((response) => {
        getshebeilist.value = response.data.data
    })
}

const submitForm = async (formEl: FormInstance | undefined) => {
    axios.post('https://localhost:7229/api/Cleaning/Handle', ruleForm).then((response => {
        if (response.data.code == 200) {
            ElMessage.success('添加成功')
        } else {
            ElMessage.error('添加失败')
        }
    })
    )
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>